<template>
	<navigatorComp title="定制服务" bgcColor="#F6F6F6" fontColor="#0E0E0E"></navigatorComp>
	<view class="content">
		<view class="consult_box">
			<view class="consult_form_title">信息填写:</view>
			<view class="consult_form">
				<up-form labelPosition="left" :model="formData" ref="form1" label-width="150rpx">
					<up-form-item label="服务类型" prop="customizeType" borderBottom ref="item1">
						<up-radio-group activeColor="#F3E0BB" iconColor="#0E0E0E" v-model="formData.customizeType"
							size="30rpx">
							<up-radio label="购买墓地" :labelSize="14" :name="1" labelColor="#0E0E0E"
								style="margin-right: 48rpx"></up-radio>
							<up-radio label="骨灰寄存" :labelSize="14" :name="2" labelColor="#0E0E0E"></up-radio>
						</up-radio-group>
					</up-form-item>
					<up-form-item label="价位" prop="price" borderBottom ref="item1">
						<view :class="['placeHolder', priceIndex!=undefined && 'value']" @click="openChoosePricePopup">
							<text v-if="priceIndex != undefined">
								{{ choosePricePopup.list[0][choosePricePopup.choosedIndex].price }}
							</text>
							<text v-else>请选择价位</text>
						</view>
						<image class="arrow_right" src="http://112.124.50.179:8888/imgs/home/arrow_right.png" mode=""></image>
					</up-form-item>
					<up-form-item label="区域" prop="name" borderBottom ref="item1">

						<pickerAddress @change="changeAddress">
							<view class="display_flex">
								<view :class="['placeHolder', formData.address && 'value']">
									{{ formData.address || '请选择区域' }}
								</view>
								<image class="arrow_right" src="http://112.124.50.179:8888/imgs/home/arrow_right.png" mode=""></image>
							</view>
						</pickerAddress>
					</up-form-item>
					<up-form-item label="联系人" prop="name" borderBottom ref="item1">
						<up-input v-model="formData.contacter" border="none" inputAlign="right" placeholder="请输入联系人"
							maxlength="5"></up-input>
					</up-form-item>
					<up-form-item label="联系电话" prop="phone" borderBottom ref="item1">
						<up-input type="number" v-model="formData.phone" border="none" inputAlign="right"
							placeholder="请输入手机号" maxlength="11"></up-input>
					</up-form-item>
					<up-form-item label="微信(选填)" prop="wechat" borderBottom ref="item1">
						<up-input v-model="formData.wechat" border="none" inputAlign="right"
							placeholder="请输入微信号"></up-input>
					</up-form-item>
				</up-form>
			</view>
			<view class="display_flex" style="padding-bottom: 16rpx">
				<myButton bgcColor="#F3E0BB" name="提交" width="400rpx" @clickBtn="handleSubmit"></myButton>
			</view>
		</view>
		<view class="consult_box">
			<view class="consult_tip">
				<view style="font-size: 32rpx; margin-bottom: 16rpx">温馨提示</view>
				<view>
					*目前的服务只针对于广东地区
					<br />
					请输入您的有效联系方式，提交咨询信息后，我们的客服人员将在24小时内与您取得联系，了解您的具体需求。
					<br />
					天堂墓园属于线下选择墓地服务，我们理解这项服务的重要性，因此从咨询到服务执行的每一个环节，都将由经验丰富的工作人员负责，确保服务的质量与细节都能达到您的期望。我们的目标是为您所爱之人提供一个宁静、整洁且充满尊重的安息之所。
					<br />
					请您放心选择我们的天堂墓园服务，我们将全力以赴，以最真诚的态度和专业的精神，满足您的所有需求。
				</view>
			</view>
		</view>
	</view>

	<!-- 选择价位弹框 -->
	<up-picker immediateChange keyName='price' :show="choosePricePopup.show" :columns="choosePricePopup.list"
		title="选择价位" :defaultIndex="[choosePricePopup.choosedIndex]" itemHeight="76" visibleItemCount="3" cancelText=""
		confirmText="" :toolbarRightSlot="true" class="choosePricePopup" @change="changePicker">
		<template #toolbar-right>
			<u-icon @click="choosePricePopup.show=false" name="close" color="#0E0E0E" size="20"></u-icon>
		</template>
		<template #toolbar-bottom>
			<view class="choosePricePopup_button">
				<myButton bgcColor="none" name="确定" width="400rpx" @clickBtn="confirmPrice"></myButton>
			</view>
		</template>
	</up-picker>

	<!-- 客服 -->
	<customerService></customerService>
</template>

<script setup>
	import navigatorComp from '/components/navigator/index.vue';
	import myButton from '/components/button/index.vue';
	import myPopup from '/components/popup/index.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import _ from 'lodash';
	import customerService from '/components/customerService/index.vue';
	import pickerAddress from '/components/picker/addressPicker.vue';
	import ServiceApi from '@/API/service/index.js';
	const serviceApi = new ServiceApi();
	const formData = reactive({
		address: '',
		contacter: '',
		phone: '',
		wechat: '',
		customizeType: '',
		priceMin: '',
		priceMax: '',
	})
	const priceIndex = ref()
	const choosePricePopup = reactive({
		show: false,
		list: [
			[{
				price: '1~5万元',
				priceMin: 10000,
				priceMax: 50000
			}, {
				price: '6~10万元',
				priceMin: 60000,
				priceMax: 100000
			}, {
				price: '10万元+',
				priceMin: 100000,
				priceMax: -1
			}]
		],
		choosedIndex: 0 //0,1,2
	});

	/**
	 * 校验表单数据
	 */
	const validate = () => {
		if (priceIndex.value == undefined) {
			uni.showToast({
				title: '请选择价位',
				icon: 'none'
			});
			return false;
		} else if (!formData.address) {
			uni.showToast({
				title: '请选择区域',
				icon: 'none'
			});
			return false;
		} else if (!formData.contacter) {
			uni.showToast({
				title: '请输入联系人',
				icon: 'none'
			});
			return false;
		} else if (formData.phone.length != 11) {
			uni.showToast({
				title: '请正确的手机号',
				icon: 'none'
			});
			return false;
		}
		return true;
	};

	const handleSubmit = _.throttle(function() {
		submit();
	}, 2000);

	/**
	 * 提交表单
	 */
	const submit = () => {
		if (!validate()) {
			return;
		}
		//请求
		serviceApi.addServiceCustomizeApi(formData)
			.then((res) => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/subPages/service/result?title=定制服务'
					})
				})
			}).catch(() => {});


	};

	const openChoosePricePopup = () => {
		choosePricePopup.show = true;
		if (priceIndex.value) {
			choosePricePopup.choosedIndex = priceIndex.value;
		}
	};

	const changePicker = (e) => {
		choosePricePopup.choosedIndex = e.index;
	};

	/**
	 * 确定价格
	 */
	const confirmPrice = (e) => {
		priceIndex.value = choosePricePopup.choosedIndex;
		formData.priceMin = choosePricePopup.list[0][priceIndex.value].priceMin
		formData.priceMax = choosePricePopup.list[0][priceIndex.value].priceMax
		choosePricePopup.show = false;
	};

	/**
	 * 选择地址
	 */
	const changeAddress = (e) => {
		if (e.data) {
			formData.address = e.data.join('');
		}
	};

	const goUrl = (url) => {
		uni.navigateTo({
			url: url
		});
	};
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
		/* #ifdef H5 */
		padding-top: 0;
		/* #endif */
	}

	.content {
		padding: 0 0 150rpx 0;
		overflow: scroll;
	}

	.consult_box {
		margin: 24rpx 24rpx 16rpx 24rpx;
		padding: 32rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.consult_title {
		font-weight: 500;
		font-size: 36rpx;
		color: #0e0e0e;
		line-height: 42rpx;
		margin-bottom: 16rpx;
	}

	.consult_price {
		font-weight: 500;
		font-size: 32rpx;
		color: #ff4c5a;
		line-height: 38rpx;
		letter-spacing: 1px;
	}

	.consult_form_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #0e0e0e;
		line-height: 38rpx;
		margin-bottom: 12rpx;
	}

	.consult_form {
		margin-bottom: 44rpx;

		::v-deep .u-form-item__body__right__content__slot {
			display: flex !important;
			align-items: center !important;
			justify-content: flex-end !important;
		}

		::v-deep .u-form-item__body__left__content__label {
			font-size: 28rpx !important;
			font-weight: 400 !important;
			color: #0e0e0e !important;
		}

		::v-deep .uni-input-placeholder {
			font-size: 28rpx !important;
			color: #999999 !important;
		}

		::v-deep .uni-input-input {
			font-size: 28rpx !important;
			color: #0e0e0e !important;
		}

		::v-deep .u-radio-group--row {
			justify-content: flex-end !important;
		}

		.placeHolder {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
			text-align: right;
		}

		.value {
			color: #0e0e0e;
		}

		.arrow_right {
			width: 40rpx;
			height: 40rpx;
			margin-right: -10rpx;
		}
	}

	.consult_tip {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.choosePricePopup {
		::v-deep .u-picker {
			padding-bottom: 150rpx !important;
		}

		::v-deep .u-toolbar {
			height: 112rpx !important;
			padding: 0 32rpx !important;
			box-sizing: border-box !important;
		}

		::v-deep .u-toolbar__title {
			color: #0e0e0e !important;
		}

		::v-deep .u-picker__view__column__item {
			// height:152rpx !important;
			font-size: 36rpx !important;
			color: #0e0e0e !important;
		}

		.choosePricePopup_button {
			position: absolute;
			bottom: 16rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>